<template>
	<view>
		<view class="u-abso u-abso-l-0 u-abso-t-0">
			<u-image width="750" height="1250" src="/static/index/index.png"></u-image>
		</view>
		<view class="u-flex u-row-center u-col-center u-rela white"
			:style="{paddingTop: menu.top + 'px',height: menu.height+'px',boxSizing: 'content-box'}">{{setting.app_name}}</view>
		<view class="u-rela box">
			<view class="u-text-center u-font-34 u-font-bold">领取流程</view>
			<u-line color="#fff" margin="40rpx 0"></u-line>
			<view class="u-flex u-col-center">
				<u-image width="86" height="86" src="/static/index/a1.png" border-radius="30"></u-image>
				<view class="u-m-l-30">
					<view class="u-font-32 u-font-bold">答题</view>
					<view class="u-font-24 u-content-color u-m-t-20">首先需要答两道题，然后提交</view>
				</view>
			</view>
			<u-line color="#fff" margin="45rpx 0"></u-line>
			<view class="u-flex u-col-center">
				<u-image width="86" height="86" src="/static/index/a2.png" border-radius="30"></u-image>
				<view class="u-m-l-30">
					<view class="u-font-32 u-font-bold">选择宣传品套餐</view>
					<view class="u-font-24 u-content-color u-m-t-20">从推荐的三个套餐中，任选一个</view>
				</view>
			</view>
			<u-line color="#fff" margin="45rpx 0"></u-line>
			<view class="u-flex u-col-center">
				<u-image width="86" height="86" src="/static/index/a3.png" border-radius="30"></u-image>
				<view class="u-m-l-30">
					<view class="u-font-32 u-font-bold">提交订单</view>
					<view class="u-font-24 u-content-color u-m-t-20">添加收货地址，提交所选择套餐订单</view>
				</view>
			</view>
			<u-line color="#fff" margin="40rpx 0"></u-line>
			<u-button type="success" shape="circle"
				:custom-style="{background:' linear-gradient(0deg, #009175 0%, #0FC6A2 100%)',height:'90rpx'}"
				@click="navigatorTo('/pages/answer/index')">开始答题</u-button>




			<u-popup v-model="popupShow" mode="center">
				<view class="u-rela u-h-520">
					<u-image width="575" height="490" src="/static/tips.png"></u-image>
					<view class="u-abso u-abso-t-0 u-abso-l-0 u-abso-b-0 u-abso-r-0 tips">
						<view>温馨提示</view>
						<view class="u-font-34 u-font-bold u-m-tb-60">活动名额已满,请期待下一期</view>
						<u-button type="success" shape="circle"
							:custom-style="{background: '#04A082',width: '275rpx',height: '65rpx',fontSize: '26rpx'}"
							@click="popupShow = false">我知道了</u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupShow: false
			}
		},
		onLoad() {

		},
		onShow() {
			this.$u.api.getUserInfo().then(res => {
				this.$u.vuex('userInfo', res.data)
				this.$u.vuex('isLogin', true)
			}).catch(err => {
				this.$u.vuex('userInfo', {})
				this.$u.vuex('isLogin', false)
				this.$u.route({
					url: '/pages/guide/index',
					type: 'redirectTo'
				})
			})
		},
		methods: {
			// 跳转页面
			navigatorTo(url) {
				if (this.userInfo.is_order_count) {
					this.$u.toast('题目完成，前去领奖！')
					setTimeout(() => this.$u.route('/pages/goods/index'), 1500)
					return
				}
				if (this.userInfo.act_num == 0) {
					this.popupShow = true
					return
				}
				this.$u.route(url)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		margin-top: 200rpx;
		padding: 60rpx;
	}

	/deep/.u-mode-center-box {
		background: inherit !important; 
	}
	.tips{
		padding-top: 180rpx;
		text-align: center;
	}
</style>